import React from "react";
function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}
export function CollegeTabs({ tabs, currentTab, setCurrentTab }) {
  return (
    <div>
      <div className="">
        <div className="border-b border-gray-200">
          <nav className="-mb-px flex space-x-8" aria-label="Tabs">
            {tabs.map((tab, index) => (
              <a
                key={tab.name}
                className={classNames(
                  currentTab.name === tab.name
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
                  'group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium'
                )}
                aria-current={currentTab.name === tab.name ? 'page' : undefined}
                onClick={() => setCurrentTab(tab)}
              >
                <tab.icon
                  className={classNames(
                    currentTab.name === tab.name ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500',
                    '-ml-0.5 mr-2 md:h-5 md:w-5'
                  )}
                  aria-hidden="true"
                />
                <span>{tab.name}</span>
              </a>
            ))}
          </nav>
        </div>
      </div>
    </div>
  );
}
